<template>
  <div class="adminHandle" >
    <el-tabs type="border-card">

      <el-tab-pane label="学生用户">

        <el-table
          :data="tableDataStudentTimely"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="学生id">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="学生学号">
                  <span>{{ props.row.number }}</span>
                </el-form-item>
                <el-form-item label="学生名称">
                  <span v-show="!isEdit">{{ props.row.name }}</span>
                  <el-input v-model="props.row.name" v-show="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="学生性别">
                  <span v-show="!isEdit">{{ props.row.sex }}</span>
                  <el-select v-model="props.row.sex" v-show="isEdit">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="学生班别">
                  <span v-show="!isEdit">{{ props.row.clazzId }}</span>
                  <el-input v-model="props.row.clazzid" v-show="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="学生密码">
                  <span v-show="!isEdit">{{ props.row.password }}</span>
                  <el-input v-model="props.row.password" v-show="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="学生电话">
                  <span v-show="!isEdit">{{ props.row.phone }}</span>
                  <el-input v-model="props.row.phone" v-show="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="删除标识">
                  <span>{{ props.row.flag }}</span>
                </el-form-item>
                <el-form-item label="创建人">
                  <span>{{ props.row.creatBy }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.createTime }}</span>
                </el-form-item>
                <el-form-item>
                  <el-button type="warning" @click="toEdit">编辑</el-button>
                  <el-button type="primary" v-show="isEdit" @click="quitEdit(props.row)">确定</el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="学号"
            prop="number"
            sortable>
          </el-table-column>
          <el-table-column
            label="班别"
            prop="clazzId"
            sortable>
          </el-table-column>
          <el-table-column
            label="姓名"
            prop="name">
          </el-table-column>
        </el-table>

        <el-button type="primary" @click="addPerson" class="addButton">增加学生用户</el-button>

        <div class="formBox">
        <el-form ref="form" :model="addStudent" label-width="80px">
          <el-form-item label="学生名称">
            <el-input v-model="addStudent.name"></el-input>
          </el-form-item>
          <el-form-item label="学生学号">
            <el-input v-model="addStudent.number"></el-input>
          </el-form-item>
          <el-form-item label="学生性别">
            <el-select v-model="addStudent.sex">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生班别">
            <el-input v-model="addStudent.clazzId"></el-input>
          </el-form-item>
          <el-form-item label="学生密码">
            <el-input v-model="addStudent.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="学生电话">
            <el-input v-model="addStudent.phone"></el-input>
          </el-form-item>
        </el-form>
        </div>

      </el-tab-pane>


      <el-tab-pane label="教师用户">
        <el-table
          :data="tableDataTeacherTimely"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="教师id">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="教师工号">
                  <span>{{ props.row.number }}</span>
                </el-form-item>
                <el-form-item label="教师名称">
                  <span v-show="!isEditT">{{ props.row.name }}</span>
                  <el-input v-model="props.row.name" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item label="教师性别">
                  <span v-show="!isEditT">{{ props.row.sex }}</span>
                  <el-select v-model="props.row.sex" v-show="isEditT">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="教师职称">
                  <span v-show="!isEditT">{{ props.row.title }}</span>
                  <el-select v-model="props.row.title" v-show="isEditT">
                    <el-option label="教授" value="教授"></el-option>
                    <el-option label="教师" value="教师"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="教师密码">
                  <span v-show="!isEditT">{{ props.row.password }}</span>
                  <el-input v-model="props.row.password" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item label="教师电话">
                  <span v-show="!isEditT">{{ props.row.phone }}</span>
                  <el-input v-model="props.row.phone" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item label="创建人">
                  <span>{{ props.row.creatBy }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.createTime }}</span>
                </el-form-item>
                <el-form-item label="删除标识">
                  <span>{{ props.row.flag }}</span>
                </el-form-item>
                <el-form-item>
                  <el-button type="warning" @click="toEditT">编辑</el-button>
                  <el-button type="primary" v-show="isEditT" @click="quitEditT(props.row)">确定</el-button>
                </el-form-item>

              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="工号"
            prop="number"
            sortable>
          </el-table-column>
          <el-table-column
            label="职称"
            prop="title">
          </el-table-column>
          <el-table-column
            label="姓名"
            prop="name">
          </el-table-column>
        </el-table>

        <el-button type="primary" @click="addPersonT" class="addButton">增加教师用户</el-button>

        <div class="formBox">
          <el-form ref="form" :model="addTeacher" label-width="80px">
            <el-form-item label="教师名称">
              <el-input v-model="addTeacher.name"></el-input>
            </el-form-item>
            <el-form-item label="教师工号">
              <el-input v-model="addTeacher.number"></el-input>
            </el-form-item>
            <el-form-item label="教师性别">
              <el-select v-model="addTeacher.sex">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="教师职称">
              <el-select v-model="addTeacher.title">
                <el-option label="教授" value="教授"></el-option>
                <el-option label="副教授" value="副教授"></el-option>
                <el-option label="讲师" value="讲师"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="教师密码">
              <el-input v-model="addTeacher.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="教师电话">
              <el-input v-model="addTeacher.phone"></el-input>
            </el-form-item>
          </el-form>
        </div>

      </el-tab-pane>



    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HostUsrInit",
  data(){
    return{
      isEdit:false,
      isEditT:false,
      addStudent:{
        number:"",
        password:"123",
        name:"",
        sex:"",
        phone:0,
        clazzId:1,
      },
      addTeacher:{
        number:"",
        password:"123",
        name:"",
        sex:"",
        title:"",
        phone:0,
      },
      tableDataStudent:[],
      tableDataTeacher:[],
      tableDataStudentTimely:[],
      tableDataTeacherTimely:[],
    }
  },

  methods:{
    toEdit(){
      this.isEdit = true
    },
    quitEdit(row){
      this.isEdit = false
      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');

      axios.defaults.headers.common["token"] = this.token;
      axios.put(this.ip + '/STUDENT/',row).then((res)=>console.log(res,"S get changed "))
    },
    toEditT(){
      this.isEditT = true
    },
    quitEditT(row){
      this.isEditT = false
      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');

      axios.defaults.headers.common["token"] = this.token;
      axios.put(this.ip + '/TEACHER/',row).then((res)=>console.log(res,"S get changed "))
    },
    addPerson(){
      this.tableDataStudentTimely.push(this.addStudent)
      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');

      axios.defaults.headers.common["token"] = this.token;
      axios.post(this.ip + '/STUDENT/',this.addStudent).then((res)=>{console.log(res)})

      this.tableDataStudentTimely = undefined
      this.tableDataStudentTimely = new Array()
      axios.get((this.ip+'/STUDENT/')).then((response)=>{
        this.tableDataStudent = response.data
        this.tableDataStudentTimely = this.tableDataStudent
      }).catch((error)=>{
        console.log(error)
      })
    },
    addPersonT(){
      this.tableDataTeacherTimely.push(this.addTeacher)
      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');

      axios.defaults.headers.common["token"] = this.token;
      axios.post(this.ip + '/TEACHER/',this.addTeacher).then((res)=>{console.log(res)})

      this.tableDataTeacherTimely = undefined
      this.tableDataTeacherTimely = new Array()
      axios.get((this.ip+'/TEACHER/')).then((response)=>{
        this.tableDataTeacher = response.data
        this.tableDataTeacherTimely = this.tableDataTeacher
      }).catch((error)=>{
        console.log(error)
      })
    },
  },
  //弃用的监视，可以保证多管理员管理下视图的动态刷新
  // watch:{
  //   tableDataStudentTimely:{
  //     deep:true,
  //     handler(value){
  //       this.ip = localStorage.getItem('ip');
  //       this.token = sessionStorage.getItem('token');
  //
  //       axios.defaults.headers.common["token"] = this.token;
  //       for(let i=0;i<value.length;i++){
  //         axios.put(this.ip + '/STUDENT/',value[i]).then((res)=>console.log(res,"S get changed "+i))
  //       }
  //       axios.get((this.ip + '/STUDENT/')).then((response)=>{
  //         this.tableDataStudent = response.data
  //       }).catch((error)=>{
  //         console.log(error)
  //       })
  //     }
  //   },
  //   tableDataTeacherTimely:{
  //     deep:true,
  //     handler(value){
  //       this.ip = localStorage.getItem('ip');
  //       this.token = sessionStorage.getItem('token');
  //
  //       axios.defaults.headers.common["token"] = this.token;
  //       for(let i=0;i<value.length;i++){
  //         axios.put(this.ip + '/TEACHER/',value[i]).then((res)=>console.log(res,"T get changed "+i))
  //       }
  //       axios.get((this.ip + '/TEACHER/')).then((response)=>{
  //         this.tableDataTeacher = response.data
  //       }).catch((error)=>{
  //         console.log(error)
  //       })
  //     }
  //   }
  // },
  mounted() {
    this.ip = localStorage.getItem('ip');
    this.token = sessionStorage.getItem('token');

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip+'/STUDENT/')).then((response)=>{
      this.tableDataStudent = response.data
      this.tableDataStudentTimely = this.tableDataStudent
    }).catch((error)=>{
      console.log(error)
    })
    axios.get((this.ip+'/TEACHER/')).then((response)=>{
      this.tableDataTeacher = response.data
      this.tableDataTeacherTimely = this.tableDataTeacher
    }).catch((error)=>{
      console.log(error)
    })
  }

}
</script>

<style scoped>
.adminHandle {
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.addButton{
  margin: 20px 0px;
}
.formBox{
  margin: 0px 150px;
}
.el-button--warning:focus, .el-button--warning:hover {
  background: #00d4d9;
  border-color: #00d4d9;
  color: #FFF;
}
.el-button--warning {
  color: #FFF;
  background-color: #00a4a8;
  border-color: #00a4a8;
}
.el-form-item {
  margin: 5px 0px;
}
</style>
